<template>
	<div class="myheader">
		<div class="left" @click="goBack(path)">
			<img src="../../assets/left.png" alt />
		</div>
		<div class="box">
			<div class="clock">
				<img src="../../assets/clock.png" alt />
				<span ref="clock">00:00</span>
			</div>
			<div class="note" @click="showNote">添加笔记</div>
			<div class="answer" @click="showAnswer">查看答案</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'myheader',
	props: {
		path: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			minute: 0,
			second: 0,
			timer: '',
		}
	},
	created() {
		this.timer = setInterval(this.startTimer, 1000)
	},
	destroyed() {
		clearInterval(this.timer)
	},
	methods: {
		// 返回
		goBack(path) {
			if (!path) {
				window.history.back()
			} else {
				this.$router.push({ name: path })
			}
		},
		// 添加笔记
		showNote() {
			this.$parent.showNote()
		},
		// 查看答案
		showAnswer() {
			this.$parent.showAnswer()
		},
		// 计时器
		startTimer() {
			this.second += 1
			if (this.second >= 60) {
				this.second = 0
				this.minute += 1
			}
			this.$refs.clock.innerHTML =
				(this.minute < 10 ? '0' + this.minute : this.minute) +
				':' +
				(this.second < 10 ? '0' + this.second : this.second)
		},
	},
}
</script>

<style lang="less" scoped>
.headh {
	height: 44px;
}
.myheader {
	height: 44px;
	width: 100%;
	line-height: 44px;
	background-color: #ff8333;
	font-size: 16px;
	color: #fff;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	.left {
		width: 26px;
		height: 26px;
		position: absolute;
		top: 50%;
		left: 10px;
		transform: translateY(-50%);
		img {
			display: block;
			width: 100%;
		}
	}
	.right {
		position: absolute;
		top: 50%;
		right: 15px;
		height: 100%;
		font-size: 16px;
		transform: translateY(-50%);
	}
}
.box {
	width: 220px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.collect {
		width: 20px;
		img {
			display: block;
			width: 100%;
		}
	}
	.clock {
		display: flex;
		align-items: center;
		img {
			display: inline-block;
			width: 20px;
		}
		span {
			display: inline-block;
			margin-left: 5px;
			font-size: 14px;
			line-height: 14px;
		}
	}
}
</style>
